<template>
	<scroll-view class="page" scroll-y="true">
		<view class="carInfo">
			<view class="title">
				车型:{{name}}
			</view>
			<view class="brand">
				{{brand}}
			</view>
			<text class="description">{{brand}}{{name}}汽车起重机</text>
		</view>
		<view class="picker">
			<picker :value="time" :range="weights" range-key="key" @change="changeWeight">
				<view class="picker-btn">
					{{currentWeightKey ||'请选择配重'}} <text>﹀</text>
				</view>
			</picker>
		</view>
		<view class='table-module' v-if="radius.length > 0" :style="{height:(radius.length+2)*70+'rpx'}">
			<view class='left-policy-type'>
				<view class='left-col-list'>
					<view style="font-size:28upx;color: rebeccapurple;font-weight:bolder">{{radius[0]}}</view>
				</view>
				<view v-if="legType == 1" class='empty-box'></view>
				<view v-else-if="legType == 2" style="height: 126upx;" class='empty-box'></view>
				<view v-for="(item,index) in radius" v-if="index>0" class='left-col-list' :key="index">
					<view style="font-size:28upx;color: rebeccapurple;font-weight:bolder">{{item}}</view>
				</view>
			</view>

			<scroll-view class="scroll-box" id="scroll-box" scroll-x="true" enable-flex="true" scroll-anchoring="true">
				<view class="scroll-view-item" v-for="(item,index) in keys" :key="index">
					<view class='price-box'>
						<view class="price">{{String(dataMap[item + '_' + radius[0]]||'')}}</view>
					</view>
					<view v-if="legType == 1" class='company-name'>{{split(item)}}</view>
					<view v-else-if="legType == 2" style="height: 126rpx;" class='company-name'>{{split(item)}}
					</view>
					<view v-for="(cell,index2) in radius" class='price-box' v-if="index2>0" :key="index2">
						<view class="price">{{String(dataMap[item + '_' + cell]||'')}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		getCraneDetail,
		getWeightList,
		getWayList
	} from '@/api/crane.js'
	import {
		goPage
	} from '@/utils/crane'

	export default {
		components: {},
		data() {
			return {
				wid: 0,
				detail: {},
				name: '',
				brand: '',
				description: '',
				currentWeightKey: '',
				weights: [],
				radius: [],
				keys: [],
				dataMap: {},
				legType: 1,
				weight: '',
				top: 0,
				cranedetail: {}
			};
		},
		async onLoad(options) {
			// options.id = 304;
			if (options.id) {
				try {
					let res = await getCraneDetail({
						craneid: options.id,
						pagesize: 1
					});
					const schemes = res.data.cranedetail;
					let onlyWeights = await getWeightList({
						craneid: options.id
					});
					console.log('12',this.currentWeightKey)
					
					let weights = onlyWeights.data.weightList.map(v => {
						return {
							id: v.id,
							value: (v.issuperweight==0 ? '超起' : '') + (v.legtype == 1 ? v.equipweight +
									't' : '') +
								((Number(v.otherweight) != 0) ? ((v.legtype == 2 ? '副臂' : '塔况') + Number(v
										.otherweight) +
									't') : '') + (v.backmove > 0 ? `后移${v.backmove}` : ''),
							key: (v.issuperweight==1 ? '超起' : '')+v.equipweight + 't',
							weight: v.equipweight,
							leg_type: v.legtype,
						}
					});
					weights = weights.sort((a, b) => {
						return b.weight - a.weight
					});
					console.log('13',this.weights)
					this.setData({
						detail: schemes.detail,
						name: schemes.name,
						brand: schemes.brandName,
						brandId: schemes.cbrands,
						description: schemes.introduce,
						id: options.id,
						weights,
					});
					console.log('1',this.weights)
					if (options.weightid) {
						this.changeWeight(options.weightid);
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		watch: {

		},
		onShow() {},
		onReady() {
			// 加载dom
		},
		methods: {
			changeWeight: async function(params) {
				console.log("测试111111")
				uni.showLoading()
				let weightInfo = null;
				console.log("测试1111112",params)
				console.log("测试1111113",params.detail)
				console.log("测试1111114")
				if (params && params.detail) {
					weightInfo = this.weights[parseInt(params.detail.value)];
				} else {
					const weightInfoArr = this.weights.filter((item) => {
						return item.id == params
					});
					weightInfo = weightInfoArr[0];
				}
				console.log("测试1111115")
				if (!weightInfo) {
					uni.hideLoading();
					return
				}
				console.log("测试1111116")
				let res = await getWayList({
					craneid: this.id,
					cweightid: weightInfo.id
				});
				console.log("测试1111117")
				uni.hideLoading();
				console.log("测试1111118")
				let radius = [];
				let keys = [];
				let data = {};
				let way = {};
				let legType = weightInfo['leg_type'];
				console.log("测试1111119")
				res.data.wayList.forEach(v => {
					console.log("测试111111510")
					if (radius.indexOf(v.radius) === -1) {
						radius.push(v.radius)
					}

					let item = ''
					if (legType == 1) {
						item = v.primaryLength + ':' + v.way;
					} else if (legType == 2) {
						item = v.primaryLength + '_' + v.minorLength + '_' + v.angle + ':' + v.way;
					}
					if (keys.indexOf(item) === -1) {
						keys.push(item)
					}

					data[item + '_' + v.radius] = v.weight
					data[item + '_组合方式'] = v.way
				})
				
				radius.sort((a, b) => {
					return a - b
				})
				
				keys.sort((a, b) => {
					console.log("测试111111513")
					if (legType == 2) {
						if (a.split(':')[0].split('_')[0] == b.split(':')[0].split('_')[0]) {
							if (a.split(':')[0].split('-')[1] == b.split(':')[0].split('_')[1]) {
								return a.split(':')[0].split('')[2] - b.split(':')[0].split('_')[2]
							}
							return a.split(':')[0].split('_')[1] - b.split(':')[0].split('_')[1]
						}

						return a.split(':')[0].split('_')[0] - b.split(':')[0].split('_')[0]
					}
					return a.split(':')[0].split('_')[0] - b.split(':')[0].split('_')[0]
				})
				console.log("测试111111514")
				radius.unshift('组合方式');
				// console.log('请选择配重---', weightInfo['key']);
				this.setData({
					legType,
					currentWeightKey: weightInfo['key'],
					radius,
					keys,
					dataMap: data,
				})
				
				this.currentWeightKey=weightInfo['key']
				
			},
			split: function(str) {
				return str.split('_').join("\n").split(':')[0];
			},
			setData: function(data) {
				const _this = this;
				const keyArr = Object.keys(data);
				keyArr.forEach((key, index) => {
					const keys = key.split('.');
					if (keys.length === 1) {
						_this[keys[0]] = data[key];
					} else if (keys.length === 2) {
						_this[keys[0]][keys[1]] = data[key];
					} else if (keys.length === 3) {
						_this[keys[0]][keys[1]][keys[2]] = data[key];
					} else if (keys.length === 4) {
						_this[keys[0]][keys[1]][keys[2]][keys[3]] = data[key];
					}
				})
			},
		},
	};
</script>

<style lang="scss">
	.page {
		height: 100vh;
		background-color: #f2f2f2;
		position: relative;
		overflow-y: auto;
	}

	.carInfo {
		background-color: #FFFFFF;
		padding: 0 16upx 30upx;

		.title {
			font-size: 30upx;
			line-height: 42upx;
			font-weight: bold;
		}

		.brand {
			width: 160upx;
			height: 32upx;
			text-align: center;
			font-size: 20upx;
			line-height: 32upx;
			background-color: #01A1ED;
			border-radius: 8upx;
			color: #FFF;
			margin: 20upx 0;
		}

		.description {
			font-size: 24upx;
			color: #666;
		}

	}

	.picker {
		display: flex;
		justify-content: center;
		margin: 30upx 0;

		.picker-btn {
			height: 60upx;
			width: 300upx;
			line-height: 58upx;
			flex: 0 0 60%;
			font-size: 28upx;
			text-align: center;
			border-radius: 8upx;
			border: 1upx solid #888888;
			background-color: #33ADFF;
			border-color: #33ADFF;
			color: #FFFFFF;

			text {
				position: relative;
				top: 10upx;
				margin-left: 10upx;
			}
		}
	}


	.mask-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .8);
		z-index: 100;
		display: flex;
		align-items: center;
	}

	.detail {
		padding: 16upx;
		background-color: #fff;
	}

	.detail-name {
		font-size: 40upx;
		font-weight: bolder;
	}

	.detail-title {
		display: flex;
		margin: 16upx 0;
	}

	.detail-brand {
		color: #fff;
		background-color: #f58651;
		font-size: 20upx;
		padding: 8upx;
		margin-right: 16upx;
	}

	.detail-description {
		font-size: 22upx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.image {
		width: 100vw;
		display: block;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #f58651;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-icon {
		font-size: 48upx;
	}

	.bottom-text {
		font-size: 24upx;
	}

	.table-module {
		display: flex;
		margin-bottom: 120upx;
		background: white;
	}

	.left-policy-type {
		width: 120upx;
		height: auto;
	}

	.empty-box {
		width: 120upx;
		height: 70upx;
		border-right: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;
	}

	.left-col-list {
		width: 120upx;
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-right: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;
	}

	.scroll-box {
		height: auto;
		white-space: nowrap;
		/*它会防止元素中的文本换行，除非使用了一个br元素。*/
		display: flex;
		font-size: 0;
		width: calc(100vw - 120upx);
		position: relative;
	}

	.limit-scroll {
		height: auto;
	}

	.top-scroll-box {
		width: 100vw;
		height: auto;
	}

	.top-scroll-add {
		width: 100vw;
		height: 16.9vh;
	}

	.scroll-view-item {
		flex: 0 0 120upx;
		width: 120upx;
		display: inline-block;
	}

	.company-name {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		width: 100%;
		height: 70upx;
		font-weight: bolder;
		color: rebeccapurple;
		border-right: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;

	}

	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		background-color: #FFFFFF;
	}

	.price-box {
		height: 70upx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		// border-right: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;
	}

	.price {
		width: 100%;
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #7c2929;
		font-size: 28upx;
		border-right: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;
		letter-spacing: 1upx;
	}
</style>
